
<template>
  <div class="login-box flex-center-row">
    <div class="login-container flex-center-col-start">
      <div class="login-head flex-center-col">
          <div>Login</div>
      </div>
      <div class="login-form-box">
        <el-form :model="form" ref="form" :rules="rules" label-position="left" label-width="80px" size="medium"
                 @submit.native.prevent>

          <el-form-item label="账号" prop="username" class="">
            <el-input v-model="form.username" type="text" placeholder="请输入账号" clearable :minlength="2"
                      :maxlength="10" prefix-icon="el-icon-user-solid"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password" class="">
            <el-input v-model="form.password" type="password" :show-password="true" placeholder="请输入密码"
                      clearable :minlength="1" :maxlength="20" prefix-icon="el-icon-lock"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="validate" >
            <el-input style="width: 60%" prefix-icon="el-icon-picture" v-model="form.validate" placeholder="请输入验证码" ></el-input>
            <el-image @click="changeValidateImage" :src="validateUrl" class="validate-img"></el-image>
          </el-form-item>
          <el-form-item >
            <el-button  @click="submitForm">登录</el-button>
          </el-form-item>

        </el-form>
      </div>

    </div>
  </div>

</template>

<script>
  import {userApi} from "../../assets/api/userApi";
  import {saveToken} from "../../util/token"
  import {getMD5String} from "../../util/MD5Utils";

  export default {
    components: {},
    props: {},
    data() {
      return {
        baseValidateUrl:"/api/user/captcha",
        validateUrl:"/api/user/captcha",
        form: {
          username:"",
          password:"",
          validate:""
        },
        rules: {
          username: [{
            required:true,
            trigger: ['blur', 'change'],
            message: '账号格式错误'
          }],
          password: [{
            required:true,
            trigger: ['blur', 'change'],
            message: '密码格式错误'
          }],
          validate:[
            {required:true,message:"请输入验证码",trigger:'blur'},
            {max:4,min:1,message: "请输入完整验证码",trigger: ['blur','change']}
          ]
        },
      }
    },
    computed: {},
    mounted() {},
    methods: {
      changeValidateImage(){
        this.validateUrl=this.baseValidateUrl+"?v="+Math.random()
      },
      submitForm() {

        this.$refs['form'].validate(valid => {
          if (valid) {

            userApi.login({
              username:this.form.username,
              password:getMD5String(this.form.password),
              validate:this.form.validate
            }).then(resp=>{

              if(resp.code === 200){

                this.$notify({
                  type:'success',
                  message:"登录成功"
                })

                saveToken(resp.data.token)
                this.$router.push("/index/job")
              }else if(resp.code === 500){

                this.$notify({
                  type:'error',
                  message:"密码错误",
                })
                this.form.password=""
              }else if(resp.code === 1000){
                this.$notify({
                  type:'error',
                  message:"验证码错误",
                })
                this.form.validate=""
                this.changeValidateImage()
              }else if(resp.code === 1001){
                this.$notify({
                  type:'error',
                  message:"用户账号错误",
                })
                this.form.password=""
                this.form.username=""
              }
            })
            return true
          }else{
            return false
          }
        })
      },
      resetForm() {
        this.$refs['vForm'].resetFields()
      }
    }
  }

</script>


<style lang="less" scoped>
  .login-box{
    width: 100vw;
    height: 100vh;

    .login-container{
      width: 60%;
      height: 60%;
      background-color: #d9d7d7;
      border-radius:10px;
      .login-head{
        font-size: 35px;
        color: teal;
        flex:3
      }
      .login-form-box{
        flex: 7;
        .validate-img{
          border: 2px solid black;
          border-radius: 5px;
          cursor: pointer;
        }
      }
    }
  }
</style>
